<template>
	<view class="page-wrap">
		<navBar :isHome="true" :z-index="3"></navBar>
		<!-- 'webkit-scrollbar' -->
		<view :class="['home-page-main',{hasLoginPage: isLogInSmall}]" @touchmove.stop @touch.stop>
			<view class="content">
				<match-media :max-width="MAX_SIZEiZE-1" style="width: 100%;" v-if="smallScreen  && isShowBanner">
					<view class="swiper-box">
						<swiper class="swiper" :indicator-active-color="`var(--color-1)`" :current="(swiperCurrentLeft)"
							:duration="300" circular autoplay :indicator-dots="homeBanner.length > 1">
							<swiper-item v-for="item, bannerIndex in homeBanner" :key="'banner1'+bannerIndex">
								<image :src="item.image" class="swiper-item"
									@click="item.url && $tools.jumpLink(item.url)"></image>
							</swiper-item>
						</swiper>
					</view>
				</match-media>
				<match-media :min-width="MAX_SIZEiZE" v-if="bigScreen && isShowBanner">
					<view class="swiper-box">
						<swiper class="swiper" :indicator-active-color="`var(--color-1)`" :current="curBanner"
							:duration="300" autoplay circular :indicator-dots="homeBanner.length > 1"
							@change="bannerChange">
							<swiper-item v-for="item, bannerIndex in homeBanner" :key="'banner1'+bannerIndex"
								@click="item.url && $tools.jumpLink(item.url)">
								<image :src="item.image" class="swiper-item">
								</image>
							</swiper-item>
						</swiper>
						<view class="swiper-box-r">
							<swiper v-if="homeData && homeBanner" class="swiper-y" @change="getCurrentIndex"
								:current="curBanner" :duration="300" display-multiple-items="1" circular vertical>
								<swiper-item class="swiper-item-y" v-for="(item,bannerIndex) in homeBanner"
									:key="'banner2'+bannerIndex">
									<view class="swiper_coupon-wrap">
										<image :src="homeBanner[curBanner].image" class="swiper_coupon-content">
										</image>
									</view>
								</swiper-item>
							</swiper>

							<image :src="homeBanner[(curBanner + 1) % homeBanner.length].image"
								class="dark dark-banner">
							</image>
						</view>
					</view>
				</match-media>
				<!-- 首页功能列表 -->
				<view class="grid-list-wrap">
					<gridList></gridList>
				</view>
				<view class="tab_box" v-if="homeData && homeData.gamecate">
					<view class="btn_group">
						<waves :class="['tab_item', tabCurrent == gamecateIndex ? 'tab_active' : '']"
							v-for="(item,gamecateIndex) in homeData.gamecate"
							@onTap="gamecateChange(item,gamecateIndex)" :key="'gamecate'+gamecateIndex">
							<text class="tab_text">{{item.name.toUpperCase()}}</text>
						</waves>
					</view>
				</view>
				<view class="selection" v-for="getGameitem, getGameIndex in showGetGame" :key="'getGame'+getGameIndex">
					<view class="game-title">
						<waves itemClass="game-name">
							<text>{{getGameitem.name.toUpperCase()}}</text>
						</waves>
						<waves class="game-more" :wavesHover="false" @onTap="clickMore(getGameitem, getGameIndex)">
							<text>{{$t('Page.home.more')}}</text>
							<image class="more-arrow" :src="`/static/image/Home/more-arrow-${theme}.png`"
								mode="aspectFit">
							</image>
						</waves>
					</view>
					<view class="slot_list">
						<view class="slot_item" v-for="gameItem,gameIndex in getGameitem.list.slice(0,slotItemCount)"
							:key="'game'+gameIndex">
							<view class="adaptCar-wrap">
								<adaptCar :src="gameItem.gamepic" :isMaintain="gameItem.catestatus === 'mainte'"
									@onTap="clickGameurl(gameItem,gameIndex)"></adaptCar>
							</view>
							<view class="game-props">
								<view class="game-props-item">
									<image class="game-props-icon" src="@/static/image/Home/game-collected.png"
										mode="aspectFit"></image>
									<text class="game-props-text">{{ transformNum(gameItem.collectnum) }}</text>
								</view>
								<view class="game-props-item">
									<image class="game-props-icon" src="@/static/image/Home/game-hot.png"
										mode="aspectFit">
									</image>
									<text class="game-props-text"> {{ transformNum(gameItem.hotnum) }}</text>
								</view>
							</view>
							<view class="play-btn" @click="clickGameurl(gameItem,gameIndex)">{{$t('Page.home.play')}}
							</view>
						</view>
					</view>
				</view>
				<view class="footer-wrap">
					<Footer></Footer>
				</view>
			</view>
		</view>

		<!--活动弹窗 -->
		<uni-transition mode-class="fade" :duration="100" :show="isAction">
			<view class="ant-modal-mask">
				<view class="msgBox" style="width: 36rem;">
					<view class="title">
						<view class="title-text"> {{ curShowAction.title }}</view>
						<image class="close-icon" src="@/static/image/close.png" @click="closeAction"></image>
					</view>
					<view @click="jumpDetail(curShowAction.id)">
						<image v-if="curShowAction.image" :src="curShowAction.image" style="width:100%;"
							mode="aspectFit"></image>
						<view class="rich-text-wrap">
							<rich-text :nodes="curShowAction.content" class="richText"></rich-text>
						</view>
					</view>
					<view class="pagingBox" v-if="homeData.action">
						<uni-pagination :current="msgCurrent" :pageSize="1" :show-icon="true"
							:total="homeData.action.length" title="" @change="paginationChange" />
					</view>
				</view>
			</view>
		</uni-transition>

		<!-- 提款信息弹框 -->
		<uni-transition mode-class="fade" :duration="100" :show="isShowBind && isLogin">
			<view class="ant-modal-mask">
				<view class="msgBox">
					<view class="title">
						<view class="title-text">{{$t('Page.home.bdtkxx')}}</view>
						<image class="close-icon" src="@/static/image/close.png" @click="closePppup"></image>
					</view>
					<uni-forms ref="bindBankRef" :rules="bindBankRules" :modelValue="bankInfo" validateTrigger="blur"
						label-position="top">
						<uni-forms-item label-width="200px" name="phone" :label="$t('Page.user.shj')">
							<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
								v-model.trim="bankInfo.phone" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label-width="200px" name="cpf" label="CPF">
							<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
								v-model.trim="bankInfo.cpf" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label-width="200px" name="name" :label="$t('Page.user.mz')">
							<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
								v-model.trim="bankInfo.name" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label-width="200px" name="email" :label="$t('Page.user.yx')">
							<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
								v-model.trim="bankInfo.email" :clearable="false" />
						</uni-forms-item>
						<uni-forms-item label-width="200px" name="pix" label="PIX">
							<uni-easyinput maxlength="30" :styles="styles" primaryColor="transparent"
								v-model.trim="bankInfo.pix" :clearable="false" />
						</uni-forms-item>
						<waves class="btn confrim-btn" @onTap="confirm('bindBankRef')">
							{{$t('Page.user.qrtj')}}
						</waves>
					</uni-forms>
				</view>
			</view>
		</uni-transition>

		<match-media :max-width="MAX_SIZEiZE">
			<tabBar :showselected="true"></tabBar>
		</match-media>
	</view>
</template>
<script>
	import {
		Debounce,
		showToast,
		checkEmail
	} from '@/utils/common.js'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	import {
		goGamePang
	} from '@/utils/routerJump.js'
	import {
		mapState,
		mapActions,
		mapGetters,
		mapMutations
	} from 'vuex'
	import Footer from '@/components/footer/footer.vue'
	export default {
		components: {
			Footer
		},
		data() {
			return {
				screenWidth: uni.getWindowInfo().windowWidth,
				msgCurrent: uni.getStorageSync('msgCurrent') || 1,
				isFocus: false,
				MAX_SIZEiZE,
				swiperCurrentLeft: 0,
				swiperCurrentRight: 0,
				tabCurrent: 0,
				curBanner: 0,
				disUpDown: false,
				searchGameList: [],
				isShowBind: false,
				styles: {
					borderColor: '#2e363f',
					color: '#fff',
					backgroundColor: 'rgba(204,181,155,0.2)'
				},
				bindBankRules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srsjh')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (value && value.length < 10 || value.length > 13) {
										callback(this.$t('Page.user.sjgsbd'))
									}
									return true
								}
							}
						]
					},
					cpf: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.srcpf')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									// if (!validarCPF(value)) {
									// 	callback(this.$t('Page.user.cpfbd'))
									// }
									if (value && value.length < 10) {
										callback(this.$t('Page.user.cpfbd'))
									}
									return true
								}
							}
						]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srmz')
						}]
					},
					email: {
						rules: [{
								required: true,
								errorMessage: this.$t('Page.user.sryx')
							},
							{
								validateFunction: (rule, value, data, callback) => {
									if (!checkEmail(value)) {
										callback(this.$t('Page.user.yxbd'))
									}
									return true
								}
							}
						]
					},
					pix: {
						rules: [{
							required: true,
							errorMessage: this.$t('Page.user.srpix')
						}]
					}
				},
				bankInfo: {
					phone: '',
					cpf: '',
					name: '',
					email: '',
					pix: ''
				},
			}
		},
		watch: {
			'userInfo.bank': {
				handler(newVal, oldVal) {
					console.log('newVal: ', newVal);
					const result = newVal instanceof Object
					console.log('result: ', result);
					if (!result) {
						this.isShowBind = true
					} else {
						this.isShowBind = false
					}
					console.log('this.isShowBind: ', this.isShowBind);
				},
				deep: true
			},
		},
		computed: {
			...mapState({
				homeData: state => state.app.homeData || null,
				getGame: state => state.app.getGame,
				mycolect: state => state.app.mycolect,
				theme: state => state.app.theme,
				userInfo: state => state.app.userInfo,
				windowSize: state => state.app.windowSize
			}),
			...mapGetters('app', ['isLogin', 'isPhone', 'bigScreen', 'smallScreen']),
			homeBanner() {
				const homeDataType = this?.homeData instanceof Object;
				if (!homeDataType) {
					return []
				} else {
					return this?.homeData?.banner || [];
				}
			},
			isShowBanner() {
				return this?.homeBanner?.length || 0;
			},
			isLogInSmall() {
				return this.isLogin && this.windowSize.windowWidth < this.MAX_SIZEiZE;
			},
			isAction() {
				console.log('326: ', uni.getStorageSync('isHasShow'));
				const isHasShow = uni.getStorageSync('isHasShow') || false
				console.log('活动是否已经显示过了: ', isHasShow);
				// if (isHasShow) {
				// 	return false
				// } else {
				console.log('msgCurrent: ', this.msgCurrent);
				console.log('this.homeData?.action?.length: ', this.homeData?.action?.length);
				if (this.homeData?.action?.length && this.msgCurrent <= this.homeData?.action?.length) {
					return true
				}
				//  else {
				// 	uni.setStorageSync('msgCurrent', 1)
				// 	if (this.isLogin && this.msgCurrent > this.homeData?.action?.length) {
				// 		uni.setStorageSync('isHasShow', true)
				// 	}
				// 	return false
				// }
				// }
			},
			curShowAction() {
				// 添加边界判断，防止报错  减一：由于分页组件是从1开始的，第一页的时候显示的下标为0的数据
				if (this.msgCurrent <= this.homeData?.action?.length) {
					return this.homeData.action[this.msgCurrent - 1]
				} else {
					return []
				}
			},
			showGetGame() {
				try {
					let id = this.homeData.gamecate[this.tabCurrent].id
					let result = null
					for (let key in this.getGame) {
						this.getGame[key].list.forEach(item => item.catestatus = this.getGame[key].status)
					}
					if (this.getGame[id]) {
						result = {
							[id]: this.getGame[id]
						}
					} else {
						result = this.getGame
					}
					return result
				} catch (e) {}
			},
			slotItemCount() {
				// 显示三行
				if (this.windowSize.windowWidth <= 768) {
					return 3;
				} else if (this.windowSize.windowWidth <= 900) {
					return 4;
				} else if (this.windowSize.windowWidth <= 1190) {
					return 5;
				} else if (this.windowSize.windowWidth <= 1650) {
					return 6;
				} else {
					return 9;
				}
			}
		},
		onLoad() {
			if (!this.isLogin) {
				this.isShowBind = false
			}
			// 首页数据初始化  
			this.homeInit();
			console.log('this.windowSize: ', this.windowSize);
			console.log('homeBanner: ', this.homeBanner);
		},
		onPullDownRefresh() {
			// 下拉刷新，请求用户信息
			this.homeInit();
			this.getUserInfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			...mapActions('app', ['homeInit', 'getUserInfo']),
			/**
			 * current为当前页，type值为：next/prev，表示点击的是上一页还是下一个
			 */
			paginationChange({
				type,
				current
			}) {
				this.msgCurrent = current
			},
			bannerChange(e) {
				this.curBanner = e.detail.current;
			},
			confirm(ref) {
				this.$refs[ref].validate().then(res => {
					this.submit()
				}).catch(err => {})
			},
			// 使用 Debounce 修饰符，实现防抖效果
			submit: Debounce(function() {
				const {
					ADDBANK
				} = this.$api
				sendMessage({
					flag: ADDBANK,
					content: this.bankInfo
				})
				uni.$once(ADDBANK, (res) => {
					const {
						code,
						data,
						msg
					} = res
					showToast(msg)
					if (code === 1) {
						this.closePppup()
					}
				})
			}, 500),

			closePppup() {
				console.log('this.isShowBind: ', this.isShowBind);
				this.isShowBind = false
			},
			jumpDetail(id) {
				uni.navigateTo({
					url: `/pages/Notify/notifyDetail?id=${id}`
				})
			},
			// 转换收藏量和热度单位
			transformNum(number) {
				number = parseInt(number)
				// 1e3为10的三次幂=1000 1e4=10000 1e7=10000000(百万)
				if (number < 1e3) {
					return number
				} else if (number >= 1e3 && number < 1e4) {
					return `${(number / 1e3).toFixed(1)}K`
				} else if (number >= 1e4 && number < 1e6) {
					return `${(number / 1e4).toFixed(1)}W`
				} else if (number >= 1e6 && number < 1e7) {
					return `${(number / 1e6).toFixed(1)}M`
				} else if (number >= 1e7 && number < 1e8) {
					return `${(number /1e7 ).toFixed(1)}kw`
				}
			},
			lastMsg() {
				if (this.msgCurrent <= 0) return
				this.msgCurrent--
			},
			closeAction() {
				this.msgCurrent = this.homeData?.action?.length + 1;
			},
			clickMore(item, index) {
				if (!this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return;
				}
				uni.navigateTo({
					url: `/pages/Home/allGame?item=${encodeURIComponent(JSON.stringify(item))}`,
				})
			},
			clickGameurl(item, index) {
				if (!this.isLogin) {
					uni.showToast({
						title: this.$t('Page.home.qxdl'),
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/auth/auth?type=0'
						})
					}, 1000)
					return
				}
				goGamePang({
					id: item.id,
					name: item.game_name,
					namecode: item.namecode,
					gamepic: item.gamepic
				})
			},
			gamecateChange(item, index) {
				this.tabCurrent = index
			},
			updown(type) { //上下切换轮播图
				if (this.disUpDown) return
				this.disUpDown = true
				let swiperCurrentLeft = this.swiperCurrentLeft
				if (type == 'up') {
					if (swiperCurrentLeft <= 0) {
						this.swiperCurrentLeft = 0
					} else {
						this.swiperCurrentLeft--
					}
				} else {
					if (swiperCurrentLeft >= this.homeBanner?.length - 1) {
						this.swiperCurrentLeft = 0
					} else {
						this.swiperCurrentLeft++
					}
				}
				setTimeout(() => {
					this.disUpDown = false
				}, 600)
			},
			changeLeftIndex(index, item) {
				if (index == 0) {
					return this.swiperCurrentLeft = 5
				}
				this.swiperCurrentLeft = parseInt(index) - 1
			},
			getCurrentIndex(e) {
				this.swiperCurrentLeft = e.detail.current
				this.curBanner = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		background: var(--bg-3);
	}

	.btn {
		background: var(--bg-13);
		box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
		color: var(--color-28);
		border-radius: 100px;
		cursor: pointer;
	}

	.home-page-main {
		height: 100vh;
		animation-name: fadeIn;
		animation-duration: 0.8s;
		color: #fff;
		overflow-y: auto;
		margin: auto;
		box-sizing: border-box;
		position: relative;

		.content {

			.swiper-box {
				height: 390px;
				display: flex;
				justify-content: center;

				.swiper {
					flex: 1;
					height: 100%;
					border-radius: 15px;
					overflow: hidden;
					cursor: pointer;

					.swiper-item {
						display: block;
						height: 100%;
						text-align: center;
						border-radius: 15px;
						width: 100%;
						background: var(--bg-10);
						cursor: pointer;
					}

				}

				.swiper-box-r {
					width: 30%;
					padding-left: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;

					.dark-banner {
						width: 100%;
						flex: 1;
						margin-top: 20px;
						border-radius: 15px;
					}

					.swiper-y {
						flex: 1;
						cursor: pointer;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-radius: 15px;
						overflow: hidden;

						.swiper-item-y {
							display: inline-block;
							border-radius: 15px;
							cursor: pointer;
							background: var(--bg-10);

							.swiper_coupon-wrap {
								height: 100%;
								margin-bottom: 20px;
								position: relative;

								.swiper_coupon-content {
									position: absolute;
									top: 0;
									left: 0;
									width: 100%;
									height: 100%;
									background-size: cover;
									border-radius: 15px;
								}
							}
						}
					}
				}

			}

			.grid-list-wrap {
				margin: 15px 0;
			}

			.tab_box {
				max-width: calc(100vw - 64rpx);
				overflow-x: scroll;
				line-height: 1.5;
				margin-top: 15px;

				.btn_group {
					padding-bottom: 8px;
					vertical-align: middle;
					display: inline-flex;
					flex-wrap: nowrap;

					.tab_item {
						min-width: 90px;
						padding: 0 6px;
						height: 40px;
						text-align: center;
						line-height: 40px;
						margin-right: 30px;
						font-size: 14px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						cursor: pointer;
						border-radius: 50px;
						color: var(--color-8);
						background: var(--bg-11);
						border: 1px solid transparent;
						box-sizing: border-box;

						&:hover {
							border-color: var(--color-1);
						}

						.gamecateImage {
							width: 16px;
							height: 16px;
						}

						.tab_text {
							margin-left: 5px;
							font-size: 28rpx;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}

					.tab_active {
						color: var(--color-7);
						background: var(--color-1);
						border: 1px solid transparent;
					}

				}

				&::-webkit-scrollbar {
					height: 10rpx;
					width: 4rpx;
				}

				&::-webkit-scrollbar-thumb {
					background: var(--bg-9);
					border-radius: 10rpx;
				}
			}

			.game-title {
				height: 40px;
				line-height: 40px;
				margin: 20px auto 10px;
				display: flex;
				justify-content: space-between;

				.game-name {
					display: flex;
					align-items: center;
					border: 3px;
					width: fit-content;
					padding-left: 25px;
					font-size: 17px;
					font-weight: bold;
					font-family: PingFang SC-Bold, PingFang SC;
					background: var(--color-9);
					-webkit-text-fill-color: transparent;
					-webkit-background-clip: text;
					background-clip: text;
					position: relative;

					&:before {
						content: '';
						position: absolute;
						left: 6px;
						top: 50%;
						transform: translateY(-50%);
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background: var(--color-9);
					}
				}

				.game-more {
					display: flex;
					align-items: center;

					.more-arrow {
						width: 17px;
						height: 17px;
						margin-left: 6px;
					}
				}
			}

			.slot_list {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
				gap: 20px;



				.slot_item {
					width: 100%;
					border-radius: 16px;
					background: var(--bg-12);
					box-shadow: inset 0px 1px 1px 0px var(--color-10);
					padding: 10px;
					border-raduis: 15px;
					box-sizing: border-box;
					margin-right: 15px;

					.adaptCar-wrap {
						padding: 0 8px 5px;
					}

					.game-props {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.game-props-item {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-start;

							.game-props-icon {
								width: 15px;
								height: 15px;
								margin-right: 2px;
							}

							&:nth-child(2) {
								justify-content: flex-end;
							}

							.game-props-text {
								color: var(--color-11);
								font-size: 12px;
							}
						}
					}

					.play-btn {
						font-size: 12px;
						padding: 0 15px;
						height: 20px;
						line-height: 20px;
						text-align: center;
						margin: 10px auto 0;
						font-weight: bold;
						background: var(--bg-13);
						box-shadow: inset 0px 4px 4px 0px var(--box-shadow-color-1);
						border-radius: 100px;
						color: var(--color-7);
						cursor: pointer;
					}
				}
			}

			.footer-wrap {
				margin-top: 20px;
			}
		}
	}

	.dark {
		opacity: 0.4;
	}

	// 大屏
	@media screen and (min-width: 768px) {

		// 大屏PC 已登录 未登录一样
		.home-page-main {
			padding: 0 30px;
			padding-top: calc(var(--status-bar-height) + 85px);
		}
	}

	// 小屏
	@media screen and (max-width: 768px) {
		.home-page-main {
			padding: 0 15px 65px;
			// 小屏H5 APP 未登录
			/* #ifdef H5 */
			padding-top: calc(var(--status-bar-height) + 100px);
			/* #endif */
			/* #ifdef APP */
			padding-top: calc(var(--status-bar-height) + 100px);
			/* #endif */
			position: relative;

			.content {
				width: 100%;
				margin-top: 30px;

				.swiper-box {
					width: 100% !important;
					height: 194px;
					margin-bottom: 10px;

					.swiper {
						width: 100%;
						height: 100%;
					}
				}

				.slot_list {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
				}
			}
		}

		// 小屏H5 APP 已登录
		.hasLoginPage {
			/* #ifdef APP */
			padding-top: calc(var(--status-bar-height) + 102px) !important;
			/* #endif */
			/* #ifdef H5 */
			padding-top: calc(var(--status-bar-height) + 118px) !important;
			/* #endif */
		}
	}

	.uni-forms {
		width: 100%;
		padding-bottom: 20px;

		.uni-forms-item {
			box-sizing: border-box;

			.uni-easyinput {
				height: 40px;

				/deep/.uni-easyinput__content {
					height: 40px;
					border-radius: 5px;
					border: initial;
					box-sizing: border-box;
				}

			}
		}

		/deep/.uni-forms-item__label {
			color: #ffffff;
			font-weight: bold;
			font-size: 13px;
		}

		.confrim-btn {
			width: calc(100% - 30px);
			margin: 40px auto 0;
			height: 45px;
			line-height: 45px;
			text-align: center;
			font-size: 18px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
		}
	}

	// 通知弹框
	.ant-modal-mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 4000;
		width: 100% !important;
		height: 100%;
		overflow: scroll;
		margin-left: 0 !important;
		margin-right: 0 !important;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.45);
		-webkit-backdrop-filter: saturate(180%) blur(5px);
		backdrop-filter: saturate(180%) blur(5px);

		.msgBox {
			width: 30rem;
			border-radius: 1rem;
			margin-top: 48px;
			margin-bottom: 48px;
			margin-left: 16px;
			margin-right: 16px;
			padding: 15px 15px 4px;
			vertical-align: top;
			cursor: pointer;
			background: var(--bg-38);
			opacity: .95;

			&/deep/.page--active {
				color: var(--color-7);
				background: var(--color-1);
			}

			&/deep/.uni-pagination__btn {
				background: var(--color-1);
			}

			&/deep/.uni-pagination__total {
				color: #FFF;
			}

			.title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				font-size: 1.125rem;
				text-align: center;
				box-sizing: border-box;
				margin-bottom: 15px;
				word-break: break-all;

				.title-text {
					color: var(--color-17);
					max-width: 70vw;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.close-icon {
					width: 20px;
					height: 20px;
					min-width: 20px;
					max-height: 20px;
					cursor: pointer;
					margin-left: 15px;
				}
			}

			.rich-text-wrap {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-top: 15px;
			}

			.richText {
				color: var(--color-30);
				word-break: break-all;

				/deep/img {
					width: 100% !important;
				}
			}

			.pagingBox {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 16px 16px;

				.pagingBtn {
					min-width: 2em;
					min-height: unset;
					color: var(--color-19);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 3px;
					font-weight: 500;
					margin-right: 4px;

					&:last-child {
						margin-right: 0;
					}
				}

				.pagingActive {
					background: var(--bg-13);
					color: var(--color-28);
				}
			}
		}
	}
</style>